import styled from "@emotion/styled";
import { Divider, Statistic } from "antd";
import { AccountBookOutlined, TeamOutlined, FileSearchOutlined, PieChartOutlined, HddOutlined } from '@ant-design/icons';
import { FlexContentBox } from "../../components/styled";
import useDashboardModel, { UseDashboard } from "../../model/useDashboardModel";
import { emptyToZero } from "../../utils";

const formateMortgageRate = (value: any): string => {
    return typeof value === 'string' ? value : '0%'
}

const getTopContent = (dashboard: UseDashboard) => [
    { title: "剩余生息资产", value: emptyToZero(dashboard.dashboardInfo?.leftoverAsset), prefix: <AccountBookOutlined /> },
    { title: "在贷客户数量", value: emptyToZero(dashboard.dashboardInfo?.custNum), prefix: <TeamOutlined /> },
    { title: "逾期应还合计", value: emptyToZero(dashboard.dashboardInfo?.leftoverAsset), prefix: <FileSearchOutlined /> },
    { title: "当年投放/昨日投放", value: `${emptyToZero(dashboard.dashboardInfo?.yearAmt)}/${emptyToZero(dashboard.dashboardInfo?.yesterdayAmt)}`, prefix: <PieChartOutlined /> }
]
const getBottomContent = (dashboard: UseDashboard) => [
    { title: "D60归档率", value: formateMortgageRate(dashboard.d60Info?.D60MortgageRate), prefix: <HddOutlined /> },
    { title: "D90归档率", value: formateMortgageRate(dashboard.d90Info?.D90MortgageRate), prefix: <HddOutlined /> }
]

const getContent = (dashboard: UseDashboard) => [
    { line: getTopContent(dashboard) },
    { line: getBottomContent(dashboard) }
]

const InfoView = () => {
    const dashboard = useDashboardModel()
    const content = getContent(dashboard)

    return <div>
        {
            content.map((lines, i) => <FlexContentBox key={`dashboard_info_view_line${i}`}>
                {
                    lines.line.map((item, index) => <FlexContentBox key={`dashboard_info_view_line_item${index}`}>
                        <MyStatistic title={item.title} value={item.value} prefix={item.prefix} />
                        {index < lines.line.length - 1 ? <MyDivider type="vertical" /> : null}
                    </FlexContentBox>)
                }
            </FlexContentBox>)
        }
    </div>
}

const MyDivider = styled(Divider)`
height: 50px;
background-color: #eee;
margin-left: 20px;
margin-right: 20px;
`
const MyStatistic = styled(Statistic)`
margin-bottom: 10px;
`

export default InfoView
